<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<div class="list-box">
					<div class="item-box" v-for="item in page.list">
						<image :src="item.spu.cover" mode="aspectFill" class="item-img"></image>
						<div class="item-info">
							<span class="jiu-font32-fff info-title">{{ item.spu.spuTitle }}</span>
							<div class="tags-box">
								<span class="tags" v-for="item1 in item.spu.tags.split(',')">
									<label>{{ item1 }}</label>
								</span>
							</div>
							<div style="display: flex;justify-content: space-between;flex: 1;align-items: end;">
								<div class="num-box" >
									<image src="@/static/img/num.png" mode="aspectFill" class="num-img"></image>
									<span>{{ item.collection.nftItemIdV }}/{{ item.spu.nftMaxSupply }}</span>
								</div>
								<span class="button" @tap="onSelect(item)">放置</span>
							</div>
						</div>
					</div>
				</div>
			</ma-refresh>
		</ma-body>
	</div>
</template>

<script>
	import Refresh from '@/$ma/common/js/refresh.js';
	export default{
		data(){
			return{
				page: new Refresh(this, {
					apiName: 'getCollectionPlace',
					id: 0
				}),
				selectIndex: '',
				id: ''
			}
		},
		methods: {
			onSelect(item){
				let data = {
					collectionId: item.collectionId,
					index: this.selectIndex,
					pavilionId: this.id
				};
				this.$u.api.onCollectionInfoPlace(data).then(res=>{
					uni.showToast({
						icon: 'none',
						title: '放置成功'
					})
					uni.navigateBack({
						delta: 1
					})
				})
			}
		},
		async onLoad(e) {
			this.page.id = e.id;
			this.id = e.id
			this.selectIndex = e.index;
			await this.page.onRefresh();
		}
	}
</script>

<style lang="scss">
	.num-box{
		display: inline-flex;
		align-items: center;
		border-radius: 1.07vw;
		background-color: #323232;
		.num-img{
			width: 8.8vw;
			height: 4.27vw;
			display: block;
			border-radius: 1.07vw;
		}
		span{
			padding: 0 1.07vw;
			color: #FFCE80;
			font-size: 2.67vw;
			font-weight: 300;
		}
	}

	.list-box{
		display: flex;
		flex-direction: column;
		padding: 2.13vw 4.27vw 0 4.27vw;
		
		.item-box{
			display: flex;
			padding: 2.13vw;
			padding-right: 4.27vw;
			background-color: #1b1b1b;
			border-radius: 6.4vw;
			margin-top: 2.67vw;
			.item-img{
				width: 37.33vw;
				height: 37.33vw;
				border-radius: 6.4vw;
			}
			.item-info{
				display: flex;
				flex-direction: column;
				margin-left: 3.2vw;
				.tags-box{
					display: flex;
					flex-wrap: wrap;
					.tags{
						margin-top: 2.13vw;
						padding: 0.27vw 1.07vw;
						border: 1px solid #A972FF;
						border-radius: 1.07vw;
						font-size: 2.67vw;
						font-weight: 300;
						color: #A972FF;
						display: inline-flex;
						margin-right: 2.13vw;
					}
				}
				.info-title{
					display: block;
					width: 44.53vw;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					margin-top: 2.13vw;
				}
				.button{
					width: 17.07vw;
					line-height: 8.53vw;
					text-align: center;
					border-radius: 5.33vw;
					background: #A972FF;
					box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.48);
					color: #000;
					font-weight: 500;
					font-size: 3.2vw;
				}
			}
		}
	}
</style>